<script setup>
import { inject, onMounted, onUnmounted } from 'vue'
import { LineLayer, PointLayer, Popup, Scene } from '@antv/l7'
import api from '@/axios/smart_city'

let map, scene, flyPathLayer, flyEndLayer, flyLayer
async function initFlyLayer() {
  let flyPath = await api.getFlyPath()
  let flyEnd = await api.getFlyEnd()
  flyLayer = new LineLayer()
   .source(flyPath)
   .color('#ff6b34')
   .texture('plane')
   .shape('arc')
   .size(10)
   .animate({
    duration: 1,
    interval: 0.2,
    trailLength: 0.05,
   })
   .style({
    textureBlend: 'replace',
    lineTexture: true,
    iconStep: 10,
   })
  scene.addLayer(flyLayer)
  flyPathLayer = new LineLayer()
   .source(flyPath)
   .color('#ff6b34')
   .shape('arc')
   .size(1)
   .style({
    lineType: 'dash',
    dashArray: [5, 5],
    opacity: 0.5
   })
  scene.addLayer(flyPathLayer)

  flyEndLayer = new PointLayer()
    .source(flyEnd)
    .shape('circle')
    .color('#ffed11')
    .animate(true)
    .size(40)
  scene.addLayer(flyEndLayer)
}
onMounted(() => {
  ({map, scene} = inject('mapScene'))
  map.flyTo({
    center: [114.3, 30.5],
    zoom: 2,
    speed: 2,
  })
  map.setProjection('mercator')
  scene.addImage('plane', '/src/assets/icons/fly.svg')
  initFlyLayer()
})
onUnmounted(() => {
  map.setProjection('globe')
  scene.removeLayer(flyLayer)
  scene.removeLayer(flyPathLayer)
  scene.removeLayer(flyEndLayer)
})
</script>

<template>

</template>

<style lang="scss">

</style>
